<template>
	<view class="cph">
		<view class="cph-header">
			<scroll-view class="cph-tab-scroll" :scroll-left="scrollLeft" scroll-x>
				<view class="cph-tab-box">
					<view class="cph-tab" 
					  v-for="(item, index) in tabList"
						@click="activeTab(index)"
						:class="{activeTabClass: index === activeTabIndex}"
					  :key="item">{{item}}
					</view>
				</view>
			</scroll-view>
			<view class="cph-search">
				<image src="/static/search.png"></image>
			</view>
		</view>
		<swiper :current="activeTabIndex" @change="tabChange">
			<swiper-item v-for="item in 7">{{item}}</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [
					'关注',
					'软件',
					'最新',
					'推荐',
					'问答',
					'博客',
					'英文',
				],
				activeTabIndex: 2,
				previousActiveTabIndex: 2,
				scrollLeft: 0
			}
		},
		watch: {
			
			//顶栏tab滑动时，尽量将激活tab显示在中间
			activeTabIndex(newIndex, oldIndex) {
				if(newIndex > oldIndex) {
					this.scrollLeft += 60
				} else {
					this.scrollLeft -= 60
				}
			}
		},
		methods: {
			activeTab(index) {
				this.activeTabIndex = index
			},
			
			tabChange(e) {
				this.activeTabIndex = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	
	.cph {
		width: 100%;
		
		.cph-header {
			position: relative;
			width: 100%;
			height: 30px;
		
			.cph-tab-scroll {
		
				.cph-tab-box {
					display: flex;
					height: 30px;
					flex-wrap: nowrap;
		
					.cph-tab {
						width: 40px;
						flex-shrink: 0;
						margin-left: 30px;
						line-height: 30px;
						text-align: center;
						font-size: 14px;
						font-weight: bold;
						color: #9d9d9d;
						
						&:last-child {
							padding-right: 60px;
						}
					}
					
					.activeTabClass {
						transform: scale(1.5);
						color: black;
					}
				}
			}
		
			.cph-search {
				position: absolute;
				width: 40px;
				height: 30px;
				top: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				
				image {
					width: 24px;
					height: 24px;
				}
			}
		}
	}
</style>
